import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/base_router_config.dart';
import 'package:wallet_utils/button_style.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/ht_appbar.dart';
import 'package:wallet_utils/text_style.dart';
import 'logic.dart';

class ForgetPwdPage extends StatelessWidget {
  final logic = Get.put(ForgetPwdLogic());
  final state = Get.find<ForgetPwdLogic>().state;

  FocusNode mobileFocusNode = FocusNode();
  FocusNode pwdFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Material(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/bg_login.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: GetBuilder<ForgetPwdLogic>(builder: (logic) {
            return Scaffold(
              backgroundColor: Colors.transparent,
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().statusBarHeight + 12.h,
                      left: 15.w,
                    ),
                    child: backWidgetAction(backAction: () {
                      Get.back();
                    }),
                  ),
                  SizedBox(
                    height: 56.h,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 30.w),
                    child: Text(
                      '忘记密码',
                      style: TextStyleUtils.style000000(fontSize: 27.w, fontWeight: FontWeight.bold),
                    ),
                  ),
                  GetBuilder<ForgetPwdLogic>(builder: (logic) {
                    return accountInput();
                  }),
                  GetBuilder<ForgetPwdLogic>(builder: (logic) {
                    return smsCodeInput();
                  }),
                  Container(
                    margin: EdgeInsets.only(left: 30.w, top: 24.w),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(right: 5.w),
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {
                              logic.updateUserPrivary();
                            },
                            child: Container(
                              width: 16.w,
                              height: 16.w,
                              margin: const EdgeInsets.only(top: 4),
                              alignment: Alignment.center,
                              child: state.isAgreeUserPrivary
                                  ? Image.asset(
                                "images/ic_agreement_checked.png",
                                width: 11.w,
                                height: 11.w,
                              )
                                  : Image.asset(
                                "images/ic_agreement_unchecked.png",
                                width: 11.w,
                                height: 11.w,
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Text.rich(
                            TextSpan(
                              children: <InlineSpan>[
                                TextSpan(text: "我已阅读并同意",
                                    style: TextStyleUtils.style999999(fontSize: 11.sp),
                                    recognizer: TapGestureRecognizer()
                                      ..onTap = () {}),
                                TextSpan(
                                  text: "《使用条款》",
                                  style: TextStyle(color: ColorManager.color437EFF, fontSize: 11.sp, height: 1.5.w),
                                  // 设置点击事件
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {},
                                ),
                                const TextSpan(
                                  text: "及",
                                ),
                                TextSpan(
                                  text: "《隐私协议》",
                                  style: TextStyle(color: ColorManager.color437EFF, fontSize: 11.sp, height: 1.5.w),
                                  // 设置点击事件
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {},
                                ),
                              ],
                            ),
                            style: TextStyle(
                              color: ColorManager.color999999,
                              fontSize: 13.sp,
                              height: 1.5,
                            ),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ),


                  loginBtn(),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }

  //登录按钮
  Widget loginBtn() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 50.w),
      width: double.infinity,
      height: 44.w,
      child: ElevatedButton(
          style: ButtonStyleUtils.buttonStyleF65247(),
          onPressed: () {
            Get.toNamed(BaseRouterConfig.settingPwd);
          },
          child: Text("下一步", style: TextStyleUtils.styleFFFFFF(fontSize: 14))),
    );
  }

  ///账号输入框
  Widget accountInput() {
    return Container(

      margin: EdgeInsets.only(left: 30.w, right: 30.w),
      child: Column(
        children: [
          TextField(
            controller: state.mobileController,
            keyboardType: TextInputType.number,
            focusNode: mobileFocusNode,
            inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
            cursorColor: ColorManager.colorF65247,
            cursorWidth: 1.w,
            style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
            maxLength: 11,
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(top: 25.w),
              labelStyle:
              TextStyle(wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
              counterText: "",
              hintText: '请输入手机号',
              hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
              focusColor: ColorManager.colorCCCCCC,
              hoverColor: ColorManager.colorCCCCCC,
              fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
            ),
            onTap: () {
              logic.requestAccountFocus(mobileFocusNode, pwdFocusNode);
            },
            onChanged: (value) {
              if (value.length >= 11) {
                //设置获取验证码颜色为红色  并且可点击
                state.timerCountDownWidget.changeTextColor(true);
                state.timerCountDownWidget.textIsTap(true);
              } else {
                //设置获取验证码颜色为灰色  并且不可点击
                state.timerCountDownWidget.changeTextColor(false);
                state.timerCountDownWidget.textIsTap(false);
              }
              logic.allowLogin(state.mobileController, state.smsCodeController);
            },
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),

        ],
      ),
    );
  }

  ///验证码输入框
  Widget smsCodeInput() {
    return Container(

      margin: EdgeInsets.only(left: 30.w, right: 30.w),

      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [

              Expanded(
                  child: TextField(
                    controller: state.smsCodeController,
                    focusNode: pwdFocusNode,
                    cursorColor: ColorManager.colorF65247,
                    cursorWidth: 1.w,
                    keyboardType: TextInputType.number,
                    style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
                    inputFormatters: [LengthLimitingTextInputFormatter(6), FilteringTextInputFormatter.digitsOnly],
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.only(top: 25.w),

                      labelStyle:
                      TextStyle(wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
                      counterText: "",
                      // labelText: "手机号码",
                      hintText: '请输入验证码',
                      hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
                      focusColor: ColorManager.colorCCCCCC,
                      hoverColor: ColorManager.colorCCCCCC,
                      fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
                    ),
                    onTap: () {
                      logic.requestAccountFocus(mobileFocusNode, pwdFocusNode);
                    },
                    onChanged: (value) {
                      logic.allowLogin(state.mobileController, state.smsCodeController);
                    },
                  )),
              Container(
                margin: EdgeInsets.only(top: 25.w),
                child: GestureDetector(
                  onTap: () {
                    state.timerCountDownWidget.textIsTap(false);
                    state.timerCountDownWidget.startCounter();
                  },
                  child: state.timerCountDownWidget,
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),
        ],
      ),
    );
  }
}
